<template>
  <BackHeader :title="lang.setting_title" />
  <div class="content">
    <Tabs :activeTabId="activeTabId" @changeTab="changeTab" />
    <Conta v-if="activeTabId === 1" />
    <Transacoes v-if="activeTabId === 2" />
    <Configuracoes v-if="activeTabId === 3" />
  </div>
</template>

<script setup lang="ts">
import Tabs from "./components/Tabs.vue";
import Conta from "./components/Conta/index.vue";
import Configuracoes from "./components/Configuracoes/index.vue";
import Transacoes from "./components/Transacoes/index.vue";

const lang: any = getCurrentPageLang("setting");

const activeTabId = ref(1);
const changeTab = (tab: any) => {
  activeTabId.value = tab.id;
};
</script>

<style scoped lang="scss">
.content {
  padding: 0.25rem 0.2rem;
  padding-top: 1.4rem;
}
</style>
